<template>
		<z-paging ref="paging" v-model="accountInfo" @query="queryList" >
			<template #top>				
				<view slot="top" >
					<tn-sticky>
						<view class="header-class tn-flex justify-end" >
							<view class="status_bar" style="height: var(--status-bar-height); width: 100%; "></view>			
							<!-- <view class="tn-color-black_text tn-flex justify-between tn-text-xl tn-pl-xl tn-pr-xl tn-pb-xl" >
								<tn-icon name="title" size="1"/>
								<span class="tn-white_text">购物车</span>
								<tn-icon name="title" size="1" />
							</view> -->
							<tn-navbar height="45px" home-icon="" :bottom-shadow = "false" bg-color="tn-type-primary_bg" text-color="tn-white" >账户余额 </tn-navbar>
							<view class="tn-flex tn-flex-column tn-flex-center-center tn-text-bold">
								<view class="tn-text-3xl tn-white_text">￥{{ye}}</view>
								<view class="tn-p-xs tn-white_text">账户余额</view>
							</view>
							
						</view>
					</tn-sticky>
					<tn-title title="交易明细" mode="vLine"  size="lg" class="tn-p"/>
				</view>
			</template>
			
		<!-- 	<template #empty>
				<empty-view />
			</template>
			 -->
			<view v-for="(item,index) in accountInfo" :key = "index">
				<view class="tn-w-auto tn-flex tn-pl tn-pb-sm tn-pt-sm tn-pr">
					<view class="tn-w-2-3">
						{{item.summaries}}
					</view>
					<view class="tn-w-1-3 tn-flex justify-end tn-type-success_text">
						{{item.amount}}
					</view>
				</view>
				<view class="tn-w-auto tn-flex tn-pl tn-pb-sm tn-pr">
					<view class="tn-w-2-3 tn-gray-dark_text">
						{{item.createtime}}
					</view>
					<view class="tn-w-1-3 tn-flex justify-end">
						{{item.remark}}
					</view>
				</view>
				<hr/>
			</view>
		</z-paging>
</template>

<script setup>
	import { ref,reactive,onMounted,watchEffect  } from 'vue'
	import { postCall  } from '@/api/index.js'
	import { EventBus } from '@/mitt/EventBus.js';
	import { toastMessage } from '@/utils/toast.js'
	
	const procName = "PROC_APP_DO_ACCOUNT";

	let pageInfo = {
		P_PAGE : 1 ,
		P_PAGESIZE : 10
	}
	

	
	const accountInfo = ref([]);
	const ye = ref(0);
	const paging = ref(null)

	const queryList = async (pageNo, pageSize) =>{
		pageInfo.P_PAGE = pageNo;
		pageInfo.P_PAGESIZE = pageSize;
		let params = {};
		params["P_PROC_NAME"] = procName;
		params["P_ACTION"] = "DETAIL";
		await postCall( Object.assign(params,pageInfo)).then(res=>{
			if(res){
				if(res.code===200 || res.code===1000){
					paging.value.complete(res.data.DATASET);
				}
			}
				
		}).catch(res =>{
			paging.value.complete(false);
		})
	}

	
	const doGetAccountInfo= async ()=>{
		let params = {};
		params["P_PROC_NAME"] = procName;
		params["P_ACTION"] = "DETAIL";
		await postCall( Object.assign(params,pageInfo)).then(res=>{
			if(res){
				if(res.code===200){
					Object.assign(accountInfo,res.data.DATASET);
					ye.value = accountInfo[0].ye;
				}	
			}
			
		})
	}
	
	const doGetYe = async ()=>{
		let params = {};
		params["P_PROC_NAME"] = procName;
		params["P_ACTION"] = "YE";
		await postCall( Object.assign(params)).then(res=>{
			if(res){
				if(res.code===200){
					ye.value = res.data.DATASET[0].ye;
				}	
			}
			
		})
	}
	
	onMounted(()=>{
		// doGetAccountInfo();
		doGetYe();
	})
	

	// const tempShoppingCartData = reactive([]);
	

</script>

<style scoped>
.header-class{
	height: 21vh !important;
	flex-direction: column
}
.no-data-class{
	
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 20vh;
}

.bu-class{
	border: 2px solid #7ABE19;
	width: 40vw;
	height: 5vh;
}

.image-class{
	width: 15vw;
	height: 15vw;
}
</style>
